<template>
	<view>
		<view >
			<view class="u-menu-wrap">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
				 :scroll-into-view="itemId">
					<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
					 @tap.stop="swichMenu(index)">
						<text class="u-line-1">{{item.name}}</text>
					</view>
				</scroll-view>
				<!-- <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
					<view class="page-view">
						<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
							<view class="item-title">
								<text>{{item.name}}</text>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
									<image class="item-menu-image" :src="item1.icon" mode=""></image>
									<view class="item-menu-name">{{item1.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view> -->
			</view>
		</view>
		<view class="bottom">
			<view class="clear" @click="clear">
				<text style="font-size: 32rpx;color: #333333;line-height: 84rpx;">清除</text>
			</view>
			<view class="confirm" @click="confirm">
				<text style="font-size: 32rpx;color: #FFFFFF;line-height: 84rpx;">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	import classifyData from '@/common/classify.data.js';
	export default {
		data() {
			return {
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				tabbar: classifyData,
				menuItemPos: [],
				arr: [],
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				timer: null, // 定时器
			}
		},
		async onLoad(){  
		            console.log('App Show，app展现在前台')  
					this.getAddress()
		        },
		methods: {
			getAddress(){
				this.$u.api.getallAreaList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
		margin-bottom: 120rpx;
	}
	
	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}
	
	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

.bottom {
		width: 100%;
		height: 120rpx;
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		display: flex;
		flex-direction: row;

		.clear {
			width: 220rpx;
			height: 84rpx;
			align-self: center;
			text-align: center;
			border-radius: 6px;
			border: 1px solid #E8EAEC;
			margin-left: 40rpx;
		}

		.text {
			font-size: 32rpx;
			color: #333333;
		}

		.confirm {
			width: 430rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #1698F9 0%, #4CC5FC 100%);
			border-radius: 6px;
			align-self: center;
			text-align: center;
			margin-left: 30rpx;
		}
		}
</style>
